<template>
  <!--  <a-modal-->
  <!--    title="主要经历"-->
  <!--    :width="600"-->
  <!--    :visible="visible"-->
  <!--    :confirmLoading="confirmLoading"-->
  <!--    @ok="handleSubmit"-->
  <!--    @cancel="handleCancel"-->
  <!--    okText="确认"-->
  <!--    cancelText="取消"-->
  <!--  >-->
  <div v-if="visible">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row
          v-for="(domain, index) in dynamicValidateForm.domains"
          :key="domain.key"
          :prop="'domains.' + index + '.value'"
        >
          <a-row :gutter="12">
            <a-col :md="9" :sm="24">
              <a-form-item
                label="时间"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                :required="true"
              >
                <a-input :disabled="isEdit[index] === false" placeholder="年.月.日-年.月.日/某年-某年" v-model="domain.experienceTime"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="11" :sm="24">
              <a-form-item
                label="主要内容"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                :required="true"
              >
                <a-input :disabled="isEdit[index] === false" placeholder="活动/奖励" v-model="domain.experienceMain"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="2" :sm="24" v-if="isEdit[index] === false">
              <a-button
                type="primary"
                ghost
                v-if="dynamicValidateForm.domains.length > 0"
                @click="handleEdit(domain, index)"
                style="margin: 4px 18px 15px 15px">编辑
              </a-button>
            </a-col>
            <a-col :md="2" :sm="24" v-if="isEdit[index] === true">
              <a-popconfirm
                title="确定要保存这1条记录吗？"
                @confirm="handleSave(domain, index)"
                okText="是"
                cancelText="否"
              >
                <a-button
                  type="primary"
                  ghost
                  v-if="dynamicValidateForm.domains.length > 0"
                  style="margin: 4px 18px 15px 15px">保存
                </a-button>
              </a-popconfirm>
            </a-col>
            <a-col :md="2" :sm="24">
              <a-popconfirm
                title="确定要删除这1条记录吗？"
                @confirm="removeDomain(domain)"
                okText="是"
                cancelText="否"
              >
                <a-button
                  type="danger"
                  ghost
                  v-if="dynamicValidateForm.domains.length > 0"
                  style="margin: 4px 6px 15px 10px">删除
                </a-button>
              </a-popconfirm>
            </a-col>
          </a-row>
        </a-row>
        <a-form-item style="text-align: center">
          <a-button type="dashed" style="width: 60%; margin-left: 20px" @click="addDomain">
            <a-icon type="plus" /> 添加主要经历
          </a-button>
        </a-form-item>
        <!--        <a-form-item style="text-align: right">-->
        <!--          <a-button type="primary" style="margin-bottom: 15px; margin-right: 12px" @click="handleSubmit">-->
        <!--            确认-->
        <!--          </a-button>-->
        <!--        </a-form-item>-->
      </a-form>
    </a-spin>
  </div>
</template>

<script>
import { addExperienceList, getExperience, removeExperience } from '@/api/basic/soldier'
import { addExperience, updateExperience } from '../../../../api/basic/soldier'

export default {
  name: 'Experience1',
  data () {
    return {
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 }
        }
      },
      formItemLayoutWithOutLabel: {
        wrapperCol: {
          xs: { span: 24, offset: 0 },
          sm: { span: 20, offset: 4 }
        }
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 }
      },
      isSubmit: false,
      isValid: true,
      isEdit: [],
      preLen: 0,
      dynamicValidateForm: {
        domains: []
      },
      domainLen: 0,
      record: {},
      experiences: [],
      experienceId: '',
      type: '',
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this)
    }
  },
  created () {
  },
  methods: {
    handleEdit (domain, index) {
      this.isEdit[index] = true
      this.visible = false
      this.visible = true
    },
    handleSave (domain, index) {
      this.isEdit[index] = false
      this.visible = false
      this.visible = true
      const _this = this
      if (domain.experienceTime === null || domain.experienceTime === '' || domain.experienceMain === null || domain.experienceMain === '') {
        this.$message.error('请填写完整信息！')
      } else if (index < this.preLen) {
        updateExperience(Object.assign(domain))
          .then(res => {
            if (res.message !== 'error') {
              this.$message.success('提交成功!')
              this.visible = false
              this.visible = true
            } else {
              this.$message.error('操作失败!')
            }
          })
      } else {
        addExperience(Object.assign(domain))
          .then(res => {
            if (res.message !== 'error') {
              this.$message.success('添加成功!')
              this.dynamicValidateForm.domains[_this.domainLen - 1].experienceId = parseInt(res.message)
              this.dynamicValidateForm.domains[_this.domainLen - 1].isFlag = 0
              this.visible = false
              this.visible = true
              this.preLen += 1
            } else {
              this.$message.error('操作失败!')
            }
          })
      }
    },
    onPanelChange (value, mode) {
      console.log(value, mode)
    },
    experience (record, type) {
      this.visible = true
      this.record = record
      this.isEdit = []
      this.preLen = 0
      if (type === 2) {
        this.type = '参加何重大活动'
      }
      if (type === 3) {
        this.type = '受何奖惩'
      }
      getExperience({ 'personId': record.personId })
        .then(res => {
          if (res.message !== 'error') {
            this.experiences = res.result
            if (this.experiences !== null) {
              for (let i = 0; i < this.experiences.length; i++) {
                if (this.experiences[i].experienceType === this.type) {
                  this.dynamicValidateForm.domains.push(Object.assign(this.experiences[i], { 'isFlag': 0 }))
                  this.isEdit.push(false)
                  this.preLen = this.preLen + 1
                }
              }
            }
            this.domainLen = this.dynamicValidateForm.domains.length
          } else {
            this.$message.error('操作失败！')
          }
        })
    },
    handleSubmit () {
      const list = []
      for (let i = 0; i < this.dynamicValidateForm.domains.length; i++) {
        if (this.dynamicValidateForm.domains[i].isFlag === 1) {
          list.push(this.dynamicValidateForm.domains[i])
        }
      }
      this.isSubmit = true
      this.isValid = true
      for (const domain of this.dynamicValidateForm.domains) {
        if (domain.experienceTime === '' || domain.experienceMain === '') {
          this.isValid = false
        }
      }
      if (this.isValid === true) { // 内容都不为空
        const { form: { validateFields } } = this
        this.confirmLoading = true
        validateFields((errors, values) => {
          if (!errors) {
            addExperienceList(list)
              .then(res => {
                if (res.message !== 'error') {
                  this.visible = false
                  this.confirmLoading = false
                  this.form.resetFields()
                  this.$emit('ok')
                  this.dynamicValidateForm.domains = []
                  this.domainLen = 0
                  this.isSubmit = false
                } else {
                  this.confirmLoading = false
                  this.$message.error('操作失败！')
                  this.dynamicValidateForm.domains = []
                  this.domainLen = 0
                  this.isSubmit = false
                }
              })
          } else {
            this.confirmLoading = false
          }
        })
      } else {
        this.$message.error('内容未填写完整! ')
      }
    },
    removeDomain (item) {
      console.log('item:', item)
      this.experienceId = String(item.experienceId)
      if (item.isFlag === 0) {
        removeExperience({ 'experienceIds': this.experienceId })
          .then(res => {
            if (res.message !== 'error') {
              this.$message.success('删除成功')
              this.preLen -= 1
            } else {
              this.$message.error('操作失败！')
            }
          })
      }
      var index = this.dynamicValidateForm.domains.indexOf(item)
      if (index !== -1) {
        this.domainLen--
        this.dynamicValidateForm.domains.splice(index, 1)
      }
      for (let i = 0; i < this.domainLen; i++) {
        this.dynamicValidateForm.domains[i].key = i + 1
        if (i >= index) {
          this.isEdit[i] = this.isEdit[i + 1]
        }
      }
      this.isEdit.pop()
    },
    addDomain () {
      if (this.domainLen > this.preLen) {
        this.$message.error('请逐条添加信息！')
        return
      }
      this.domainLen++
      this.dynamicValidateForm.domains.push({
        isFlag: 1,
        personId: this.record.personId,
        personCard: this.record.personCard,
        personName: this.record.personName,
        experienceType: this.type,
        experienceTime: '',
        experienceMain: '',
        key: this.domainLen
      })
      this.isEdit.push(true)
    },
    handleCancel () {
      this.form.resetFields()
      this.visible = false
      this.dynamicValidateForm.domains = []
      this.domainLen = 0
      this.isSubmit = false
    }
  }
}
</script>
